<template>
	<!--  :style="{ 'padding-top':pageTitle+'px' }" -->
	<view>
		<score-head></score-head>
		<view class='part one'>
			<view class='part_title dFlex jCenter_aCenter'>
				<view class='part_title_icon imgPublic'>
					<image src="/static/images/logo10@2x.png" mode="widthFix"></image>
				</view>
				<text>4D Live Results</text>
			</view>
			<view class='part_content'>
				<view class='part_content_title dFlex jAround_aCenter'>
					<view class='price_title'>First Prize</view>
					<view class='price_title'>Second Prize</view>
					<view class='price_title'>Third Prize</view>
				</view>
				<view class='part_content_value threeValue dFlex jAround_aCenter'>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
				</view>
			</view>
			<view class='part_content'>
				<view class='part_content_title dFlex jCenter_aCenter'>
					<view class='price_title'>Special Prize</view>
				</view>
				<view class='part_content_value dFlex jAround_aCenter fWap fiveValue'>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'></view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'></view>
				</view>
			</view>
			<view class='part_content'>
				<view class='part_content_title dFlex jCenter_aCenter'>
					<view class='price_title'>Consolation Prize</view>
				</view>
				<view class='part_content_value dFlex jAround_aCenter fWap fiveValue'>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
					<view class='price_value'>4509</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import scoreHead from '@/components/scoreHead.vue';
	export default {
		components:{
			scoreHead
		},
		data() {
			return {
				statusBar:getApp().globalData.statusBar,
				pageTitle:getApp().globalData.pageTitle + 228, // 137
				
			};
		}
	}
</script>

<style lang="scss">
	.part{
		.part_content{
			.part_content_value{
				width:100%;
				.price_value_group{
					display: inline-block;
					border-radius: 5px;
					.group_count{
						display: inline-block;
						width:25px;
						height: 30px;
						border-radius: 5px;
						text-align: center;
						line-height: 30px;
					}
					.empty_count{
						display: inline-block;
						vertical-align: bottom;
						background: rgb(0, 0, 0,0.5);
					}
				}
				.price_value_count{
					width:30px;
					height:30px;
					border: 1px solid #4dcd00;
					display:flex;
					justify-content: center;
					align-items: center;
					border-radius: 5px;
				}
				.price_value{
					text-align: center;
					padding: 10px 0;
					font-size:16px;
				}
			}
			.threeValue{.price_value{width:calc(100% / 3)}}
			.fiveValue{.price_value{width:calc(100% / 5)}}
			.part_content_title{
				.price_title_small{
					font-size:12px;
					text-align: center;
					padding-top: 10px;
				}
				.price_title{
					min-width:calc(100% / 3);
					text-align: center;
					padding: 10px 0;
				}
				width:100%;
			}
			width:100%;
		}
		.part_title{
			.part_title_icon{
				width:24px;
				height: 24px;
				border-radius: 50%;
				margin-right: 6px;
			}
			font-size: 18px;
			padding:12px 0;
			font-weight: bold;
		}
		width:calc(100% - 24px);
		margin:0 auto 12px;
		border-radius: 16px;
		overflow: hidden;
	}
	.one{
		.part_content{
			.part_content_title{
				background: #343A40;
				color: #FFFFFF;
			}
		}
		.part_title{
			background: #F2BC00;
			color: #FFFFFF;
		}
	}
	.kindList{
		.exchangeBtn{
			width:100%;
			padding:10px 0;
			text-align: center;
			border-top:1px solid white;
		}
		.u-grid{
			height:43px;
		}
		.u-grid-item{
			padding:5px 0;
		}
		color: white;
		font-size: 12px;
		background: linear-gradient(0deg,#290bad 0%, #9b01a1 100%), #520065;
	}
	.expand{
		.u-grid{
			height:auto;
			transition: height 5s ease;
		}
	}
	page{
		background:white;
	}
</style>
